<template>
  <div class="container"
    :class="{'main-light': !$store.state.isDarkMode, 'main-dark': $store.state.isDarkMode}"
  >
    <div class="page">
      <!-- 头部区域 包括：用户头像、搜索栏、信息等  -->
      <bp-header 
        :class="{'header-light': !$store.state.isDarkMode, 'header-dark': $store.state.isDarkMode}"
      />

      <!-- 中间内容区域 -->
      <home-content/>
    </div>
  </div>
</template>

<script>
/* 组件引入 */
import BpHeader from './BpHeader.vue';
import HomeContent from './HomeContent.vue';

export default {
  name: 'HomePage',
  components: {
    BpHeader,
    HomeContent
  },
 
}
</script>

<style scoped>
.container {
  height: 100vh;
  overflow: hidden;
}

</style>
